/**
 * 
 * @authors cherish yii2 (cherish@cherish.pw)
 * @date    2020-12-10 16:48:28
 * @version v1.0
 * @description the core js of todolist project
 * 
 * ━━━━━━神兽出没━━━━━━
 * 　　   ┏┓　 ┏┓
 * 　┏━━━━┛┻━━━┛┻━━━┓
 * 　┃              ┃
 * 　┃       ━　    ┃
 * 　┃　  ┳┛ 　┗┳   ┃
 * 　┃              ┃
 * 　┃       ┻　    ┃
 * 　┃              ┃
 * 　┗━━━┓      ┏━━━┛ Code is far away from bugs with the animal protecting.
 *       ┃      ┃     神兽保佑,代码无bug。
 *       ┃      ┃
 *       ┃      ┗━━━┓
 *       ┃      　　┣┓
 *       ┃      　　┏┛
 *       ┗━┓┓┏━━┳┓┏━┛
 *     　  ┃┫┫　┃┫┫
 *     　  ┗┻┛　┗┻┛
 *
 * ━━━━━━感觉萌萌哒━━━━━━
 */

// 请根据考试说明文档中列出的需求进行作答
// 预祝各位顺利通过本次考试，see you next week！
// ...


const oTitle = document.querySelector('[name="title"]');
const oTodolist = document.querySelector('ol');
const oDonelist = document.querySelector('ul');
const tCount = document.querySelector('#todocount');
const dCount = document.querySelector('#donecount');



let todoCount = 0;
let doneCount = 0;
let arr = [];

oTitle.addEventListener('change', function () {
    let value = oTitle.value;
    let obj = {
        name: value, status: false,
    }
    arr.push(obj);
    oTitle.value = '';
    setPage();
})
function setPage() {
    reset();
    let todoStr = '';
    let doneStr = '';
    for (let i = 0; i <= arr.length - 1; i++) {
        let obj = arr[i];
        if (obj.status === false) {
            todoCount++;
            todoStr += `
            <li>
                <input type="checkbox" class="itemValue"/>
                <p>${obj.name}</p>
                <a href="javascript:;">-</a>
            </li>
            `;
        } else {
            doneCount++;
            doneStr += `
            <li>
                <input type="checkbox" checked/>
                <p">${obj.name}</p>
                <a class="clear" href="javascript:remove(0)">-</a>
            </li>
            `;
        }
    }
    oTodolist.innerHTML = todoStr;
    tCount.innerHTML = todoCount;
    oDonelist.innerHTML = doneStr;
    dCount.innerHTML = doneCount;



    let del = document.querySelectorAll('.clear');
    for(let i = 0  ; i <= del.length-1 ; i++){
        del[i].addEventListener('click' , function(){
            let name = this.getAttribute('name');
            arr = arr.remove( e => {
              return e.name !== name
            });
            setPage();
        })
    }

    let itemChange = document.querySelectorAll('.itemValue');
    console.log(itemChange);
    for (let i = 0; i <= itemChange.length - 1; i++) {
        itemChange[i].addEventListener('change' ,function () {
            let name = this.getAttribute('name');
            let obj = arr.find(function(e){
               return e.name === name
            });
            obj.status = this.checked;
            
            setPage();
        })


    }
}
function reset() {
    todoCount = 0;
    doneCount = 0;
}
